<template>
  <div class="flex-div">
    <div class="checkbox">
      <el-checkbox-group v-model="myCheckList">
        <el-checkbox v-for="(item,index) in labels" :key="index" :label="item" />
        <el-checkbox :label="otherInput">其它：</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="input">
      <el-input v-model="otherInput" :disabled="myCheckList.indexOf(otherInput)===-1" size="mini" placeholder="请输入" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'CustomCheckbox',
  model: {
    prop: 'checkList',
    event: 'change'
  },
  props: {
    labels: {
      type: Array,
      default: function() {
        return []
      }
    },
    checkList: {
      type: Array
    }
  },
  data() {
    return {
      myCheckList: this.checkList,
      otherInput: ''
    }
  },
  watch: {
    myCheckList: {
      handler(newVal, oldVal) {
        this.$emit('change', newVal)
        // this.myCheckList[this.myCheckList.indexOf(oldVal)] = newVal
      },
      deep: true
    },
    otherInput: {
      handler(newVal, oldVal) {
        this.myCheckList[this.myCheckList.indexOf(oldVal)] = newVal
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .flex-div{
    display: flex;
    flex-direction: row;
    justify-content:start;
    align-items: center;
    > .checkbox{
      margin: 0;
      line-height: 100%;
      display: flex;
      flex-direction:column;
      justify-content:end;
    }
    > .input{
      ::v-deep .el-input__inner{
        //border-width: 0 0 1px 0;
        border-radius:0;
      }
    }
  }
</style>
